<template>
  <div class="default-main">
    <!-- :push-on-overlap="true" 可实现bar拖拽推动两边的bar，适用于bar不可交换的情况 -->
    <!-- :no-overlap="true" 可实现bar拖拽不影响其他bar，且不能与其他bar的时间范围有交集，如有交集则恢复拖拽前的位置，适用于bar可以交换的情况，自由度较高 -->
    <!-- <g-gantt-chart
      chart-start="2024-01-12 12:00"
      chart-end="2024-05-14 12:00"
      precision="month"
      bar-start="myBeginDate"
      bar-end="myEndDate"
      date-format="YYYY-MM-DD HH:mm"
      width="100%"
      grid="true"
      :current-time="true"
      color-scheme="dark"
    >
      <template #upper-timeunit>
        <div></div>
      </template>
      <g-gantt-row label="项目1" :bars="row1BarList" />
      <g-gantt-row label="项目2" :bars="row2BarList" />
    </g-gantt-chart> -->
    <!-- 另一款甘特图 -->
    <section class="my-gantt">
      <div class="time-box">
        <el-radio-group v-model="datachange.timeState" @change="changeTime">
          <el-radio-button
            v-for="(time, t_index) in datachange.timeList"
            :key="t_index"
            :label="time.code"
            size="default"
            border
            >{{ time.name }}</el-radio-button
          >
        </el-radio-group>
      </div>
      <div id="gantt_here" class="gantt-container"></div>
    </section>
    <!-- 侧边栏抽屉 -->
    <Drawer v-model="isDrawerShow" :devices="mapDevices" />
  </div>
</template>
<script lang="ts" setup>
import { mapJson2, darkMapJson } from "../../../virtual"; //常州市行政区域数据
// import { BaiduMap, BmlMarkerClusterer } from "vue-baidu-map-3x"; //baidu-map组件red
import {
  ref,
  onBeforeUnmount,
  reactive,
  nextTick,
  onActivated,
  onMounted,
  watch,
} from "vue";
import "element-plus/theme-chalk/display.css";
import { useRouter } from "vue-router";
import { useUserInfo } from "@/store/userInfo";
import { useNavTabs } from "@/store/navTabs";
import { useDashboard } from "@/store/backend/dashboard";
import Drawer from "@/components/drawer/index.vue";
import _ from "lodash";
// 引入echarts 按需引入
import * as echarts from "echarts/core";
import { useBigBoardB } from "@/store/backend/BigBoard/bigBoard2";
import { useRegion } from "@/store/backend/SysM/region";
import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import demoData from "../../../ganttData.json";
import {
  DatasetComponent,
  DatasetComponentOption,
  TitleComponent,
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption,
  TransformComponent,
} from "echarts/components";
import {
  BarChart,
  BarSeriesOption,
  LineChart,
  LineSeriesOption,
} from "echarts/charts";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useConfig } from "@/store/config";
import { useDictionary } from "@/store/backend/tool/dictionary";
echarts.use([
  DatasetComponent,
  LineChart,
  LegendComponent,
  BarChart,
  LabelLayout,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  TransformComponent,
  CanvasRenderer,
  UniversalTransition,
]);
type EChartsOption = echarts.ComposeOption<
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | BarSeriesOption
  | TitleComponentOption
  | LineSeriesOption
  | DatasetComponentOption
>;

const userInfo = useUserInfo();
const router = useRouter();
const navTabs = useNavTabs();
const bigBoardB = useBigBoardB();
const region = useRegion();
const dashboard = useDashboard();
const dictionary = useDictionary();
const { proxy } = useCurrentInstance(); //全局事件总线

const styles = ref([]);
const isDrawerShow = ref(false);
const markers = reactive<any[]>([]);
const config = useConfig();

const data = reactive({});

const state: {
  total: number[];
  warn: number[];
  normal: number[];
  fault: number[];
  days: string[];
  charts: any[];
  show: boolean;
  demoData: any;
} = {
  total: [],
  warn: [],
  normal: [],
  fault: [],
  days: [],
  charts: [],
  show: true,
  demoData: {
    data: [
      {
        id: 520,
        text: "项目1", //项目名称
        // startTime: "2023-09-25", //项目开始时间
        // endTime: "2023-10-31", //项目结束时间
        showEndTime: "2023-11-01",
        projectStatus: "暂无任务",
        projectProgress: 0,
        projectRatio: "",
        projectTotalTime: 0,
        projectUsedTime: 0,
        functionName: "",
        xmdj: "2",
        cityName: "成都",
        name: "1",
        projectMap: {},
        parent: 0, //项目上级id
        start_date: "2023-09-24 16:00:00", //项目开始时间
        end_date: "2023-10-31 16:00:00", //项目结束时间
        progress: 0.5, //完成进度
        duration: 37, //持续时间
        open: true,
      },
      {
        id: 517,
        projectName: "项目2",
        startTime: "2023-09-18",
        endTime: "2023-10-23",
        showEndTime: "2023-10-24",
        projectStatus: "暂无任务",
        projectProgress: 0,
        projectRatio: "",
        projectTotalTime: 0,
        projectUsedTime: 0,
        functionName: "",
        xmdj: "0",
        cityName: "深圳",
        name: "2",
        projectMap: {},
        parent: 0,
        start_date: "2023-09-17 16:00:00.000",
        end_date: "2023-10-23 16:00:00.000",
        progress: 0.2,
      },
      {
        id: 505,
        projectName: "项目3",
        startTime: "2023-09-04",
        endTime: "2023-09-30",
        showEndTime: "2023-10-01",
        projectStatus: "滞后",
        projectProgress: 0.76,
        projectRatio: 0.12,
        projectTotalTime: 3267.6,
        projectUsedTime: 2477.7,
        functionName: "现状还原",
        xmdj: "3",
        cityName: "成都",
        name: "3",
        projectMap: {},
        parent: 0,
        start_date: "2023-09-03 16:00:00.000",
        end_date: "2023-09-30 16:00:00.000",
        progress: 0.1,
      },
      {
        id: 508,
        projectName: "项目4",
        startTime: "2023-09-04",
        endTime: "2023-10-20",
        showEndTime: "2023-10-21",
        projectStatus: "滞后",
        projectProgress: 0.57,
        projectRatio: 0.04,
        projectTotalTime: 3582.5,
        projectUsedTime: 2033.2,
        functionName: "生活圈",
        xmdj: "1",
        cityName: "成都",
        name: "4",
        projectMap: {},
        parent: 0,
        start_date: "2023-09-03 16:00:00.000",
        end_date: "2023-10-20 16:00:00.000",
        progress: 0.15,
      },
      {
        id: 511,
        projectName: "项目5",
        startTime: "2023-09-01",
        endTime: "2023-10-31",
        showEndTime: "2023-11-01",
        projectStatus: "滞后",
        projectProgress: 0.07,
        projectRatio: 0.03,
        projectTotalTime: 2150.5,
        projectUsedTime: 140,
        functionName: "悬浮球",
        xmdj: "1",
        cityName: "成都",
        name: "5",
        projectMap: {},
        parent: 0,
        start_date: "2023-07-31 16:00:00.000",
        end_date: "2023-10-31 16:00:00.000",
        progress: 0.28,
      },
      {
        id: 507,
        projectName: "项目6",
        startTime: "2023-08-28",
        endTime: "2023-10-01",
        showEndTime: "2023-10-02",
        projectStatus: "滞后",
        projectProgress: 0.48,
        projectRatio: 0.21,
        projectTotalTime: 4957,
        projectUsedTime: 2367,
        functionName: "产品原型图",
        xmdj: "1",
        cityName: "三亚",
        name: "6",
        projectMap: {
          美术: 1,
        },
        parent: 0,
        start_date: "2023-07-27 16:00:00.000",
        end_date: "2023-10-01 16:00:00.000",
        progress: 0.33,
      },
      {
        id: 1,
        projectName: "项目7",
        startTime: "2023-08-28",
        endTime: "2023-10-25",
        showEndTime: "2023-10-26",
        projectStatus: "滞后",
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: "测量工具",
        xmdj: "1",
        cityName: "佛山",
        name: "7",
        projectMap: {},
        parent: 0,
        start_date: "2023-06-27 16:00:00.000",
        end_date: "2023-10-25 16:00:00.000",
        progress: 0.67,
      },
      {
        id: 2,
        projectName: "项目7",
        startTime: "2023-08-28",
        endTime: "2023-10-25",
        showEndTime: "2023-10-26",
        projectStatus: "滞后",
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: "测量工具",
        xmdj: "1",
        cityName: "佛山",
        name: "7",
        projectMap: {},
        parent: 0,
        start_date: "2023-06-27 16:00:00.000",
        end_date: "2023-10-25 16:00:00.000",
        progress: 0.67,
      },
      {
        id: 3,
        projectName: "项目7",
        startTime: "2023-08-28",
        endTime: "2023-10-25",
        showEndTime: "2023-10-26",
        projectStatus: "滞后",
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: "测量工具",
        xmdj: "1",
        cityName: "佛山",
        name: "7",
        projectMap: {},
        parent: 0,
        start_date: "2023-06-27 16:00:00.000",
        end_date: "2023-10-25 16:00:00.000",
        progress: 0.67,
      },
      {
        id: 4,
        projectName: "项目7",
        startTime: "2023-08-28",
        endTime: "2023-10-25",
        showEndTime: "2023-10-26",
        projectStatus: "滞后",
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: "测量工具",
        xmdj: "1",
        cityName: "佛山",
        name: "7",
        projectMap: {},
        parent: 0,
        start_date: "2023-06-27 16:00:00.000",
        end_date: "2023-10-25 16:00:00.000",
        progress: 0.67,
      },
      {
        id: 5,
        projectName: "项目7",
        startTime: "2023-08-28",
        endTime: "2023-10-25",
        showEndTime: "2023-10-26",
        projectStatus: "滞后",
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: "测量工具",
        xmdj: "1",
        cityName: "佛山",
        name: "7",
        projectMap: {},
        parent: 0,
        start_date: "2023-06-27 16:00:00.000",
        end_date: "2023-10-25 16:00:00.000",
        progress: 0.67,
      },
      {
        id: 6,
        projectName: "项目7",
        startTime: "2023-08-28",
        endTime: "2023-10-25",
        showEndTime: "2023-10-26",
        projectStatus: "滞后",
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: "测量工具",
        xmdj: "1",
        cityName: "佛山",
        name: "7",
        projectMap: {},
        parent: 0,
        start_date: "2023-06-27 16:00:00.000",
        end_date: "2023-10-25 16:00:00.000",
        progress: 0.67,
      },
      {
        id: 7,
        projectName: "项目7",
        startTime: "2023-08-28",
        endTime: "2023-10-25",
        showEndTime: "2023-10-26",
        projectStatus: "滞后",
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: "测量工具",
        xmdj: "1",
        cityName: "佛山",
        name: "7",
        projectMap: {},
        parent: 0,
        start_date: "2023-06-27 16:00:00.000",
        end_date: "2023-10-25 16:00:00.000",
        progress: 0.67,
      },
      {
        id: 8,
        projectName: "项目7",
        startTime: "2023-08-28",
        endTime: "2023-10-25",
        showEndTime: "2023-10-26",
        projectStatus: "滞后",
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: "测量工具",
        xmdj: "1",
        cityName: "佛山",
        name: "7",
        projectMap: {},
        parent: 0,
        start_date: "2023-06-27 16:00:00.000",
        end_date: "2023-10-25 16:00:00.000",
        progress: 0.67,
      },
      {
        id: 9,
        text: "项目7",
        startTime: "2023-08-28",
        endTime: "2023-10-25",
        showEndTime: "2023-10-26",
        projectStatus: "滞后",
        projectProgress: 0.27,
        projectRatio: 0.15,
        projectTotalTime: 2027.5,
        projectUsedTime: 557,
        functionName: "测量工具",
        xmdj: "1",
        cityName: "佛山",
        name: "7",
        projectMap: {},
        parent: 0,
        start_date: "2023-06-27 16:00:00.000",
        end_date: "2023-10-25 16:00:00.000",
        progress: 0.67,
      },
    ],
  },
};
const state2: {
  charts: any[];
} = { charts: [] };

// let markers = reactive<any[]>(bigBoardB.markers);
// 放置echarts的实例dom
const districtChartRef = ref<HTMLElement>();
const deviceChartRef = ref<HTMLElement>();
//地图样式
const mapStyle = reactive({
  styleJson: config.layout.isDark ? darkMapJson : mapJson2,
});

const hover = ref();

const row1BarList = ref([
  {
    myBeginDate: "2024-01-18 13:00",
    myEndDate: "2024-04-19 19:00",
    ganttBarConfig: {
      // each bar must have a nested ganttBarConfig object ...
      id: "unique-id-1", // ... and a unique "id" property
      hasHandles: true, //项目滑块可伸缩
      label: "Lorem ipsum dolor",
    },
  },
]);
const row2BarList = ref([
  {
    myBeginDate: "2024-01-15 13:00",
    myEndDate: "2024-03-20 02:00",
    ganttBarConfig: {
      id: "another-unique-id-2",
      hasHandles: true,
      label: "Hey, look at me",
      style: {
        // arbitrary CSS styling for your bar
        background: "#e09b69",
        borderRadius: "20px",
        color: "black",
      },
    },
  },
]);

const datachange = reactive({
  timeList: [
    // {
    //     name: "周",
    //     code: "week",
    // },
    {
      name: "月",
      code: "month",
    },
    {
      name: "季",
      code: "quarter",
    },
    {
      name: "年",
      code: "year",
    },
  ],
  timeState: "month",
});
// 配置时间轴参数
const zoomConfig = reactive({
  levels: [
    {
      name: "day",
      scale_height: 60,
      scales: [{ unit: "day", step: 1, format: "%d %M" }],
    },
    {
      name: "week",
      scale_height: 60,
      scales: [
        {
          unit: "week",
          step: 1,
          format: function (date: any) {
            let dateToStr = gantt.date.date_to_str("%m-%d");
            let endDate = gantt.date.add(date, -6, "day");
            let weekNum = gantt.date.date_to_str("%W")(date); //第几周
            return dateToStr(endDate) + " 至 " + dateToStr(date);
          },
        },
        {
          unit: "day",
          step: 1,
          format: "%d", // + "周%D"
          css: function (date: any) {
            if (date.getDay() == 0 || date.getDay() == 6) {
              return "day-item weekend weekend-border-bottom";
            } else {
              return "day-item";
            }
          },
        },
      ],
    },
    {
      name: "month",
      scale_height: 60,
      min_column_width: 18,
      scales: [
        { unit: "month", format: "%Y-%m" },
        {
          unit: "day",
          step: 1,
          format: "%d",
          css: function (date: any) {
            if (date.getDay() == 0 || date.getDay() == 6) {
              return "day-item weekend weekend-border-bottom";
            } else {
              return "day-item";
            }
          },
        },
      ],
    },
    {
      name: "quarter",
      height: 60,
      min_column_width: 110,
      scales: [
        {
          unit: "quarter",
          step: 1,
          format: function (date: any) {
            let yearStr = new Date(date).getFullYear() + "年";
            let dateToStr = gantt.date.date_to_str("%M");
            let endDate = gantt.date.add(
              gantt.date.add(date, 3, "month"),
              -1,
              "day"
            );
            return yearStr + dateToStr(date) + " - " + dateToStr(endDate);
          },
        },
        {
          unit: "week",
          step: 1,
          format: function (date: any) {
            let dateToStr = gantt.date.date_to_str("%m-%d");
            let endDate = gantt.date.add(date, 6, "day");
            let weekNum = gantt.date.date_to_str("%W")(date);
            return dateToStr(date) + " 至 " + dateToStr(endDate);
          },
        },
      ],
    },
    {
      name: "year",
      scale_height: 50,
      min_column_width: 150,
      scales: [
        { unit: "year", step: 1, format: "%Y年" },
        { unit: "month", format: "%Y-%m" },
      ],
    },
  ],
});

//拖拽滚动视图
const scrollInit = () => {
  const nav = document.querySelectorAll(".gantt_task")[0];
  const parNav = document.querySelectorAll(".gantt_hor_scroll")[0];
  parNav.scrollLeft = 0;
  let flag: any;
  let downX: any;
  let scrollLeft: any;
  nav.addEventListener("mousedown", function (event: any) {
    flag = true;
    downX = event.clientX; // 获取到点击的x下标
    scrollLeft = scrollLeft; // 获取当前元素滚动条的偏移量
  });
  nav.addEventListener("mousemove", function (event: any) {
    if (flag) {
      let moveX = event.clientX;
      let scrollX = moveX - downX;
      parNav.scrollLeft = scrollLeft - scrollX;
    }
  });
  // 鼠标抬起停止拖动
  nav.addEventListener("mouseup", function () {
    flag = false;
  });
  // 鼠标离开元素停止拖动
  nav.addEventListener("mouseleave", function (event: any) {
    flag = false;
  });
};

const changeTime = () => {
  gantt.ext.zoom.setLevel(datachange.timeState);
};

//初始化甘特图
const initGantt = () => {
  gantt.i18n.setLocale("cn");
  gantt.config.grid_width = 350;
  gantt.config.add_column = false; //添加符号

  //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
  gantt.config.autofit = false;
  gantt.config.row_height = 60;
  gantt.config.bar_height = 34;
  gantt.config.columns = [
    { name: "text", label: "任务名称", tree: true, width: "100" },
    { name: "start_date", label: "开始日期", align: "center", width: "100" },
    { name: "end_date", label: "结束日期", align: "center", width: "100" },
    { name: "duration", label: "持续时间", align: "center", width: "100" },
    // 添加更多列...
  ];
  // gantt.config.scale_unit = "month"; //时间轴单位
  // gantt.config.step = 1; //单位数
  gantt.config.xml_date = "%Y-%m-%d"; //甘特图时间数据格式
  // gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
  gantt.config.auto_types = true; //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
  // gantt.config.xml_date = '%Y-%m-%d' //甘特图时间格式
  gantt.config.readonly = false; //是否只读
  // gantt.ext.zoom.init(zoomConfig); //配置初始化扩展
  // gantt.ext.zoom.setLevel("month"); //切换到指定的缩放级别
  gantt.i18n.setLocale("cn"); //设置语言
  gantt.init("gantt_here"); //初始化
  // gantt.parse(demoData); //填充数据
  gantt.parse(state.demoData); //填充数据

  scrollInit();

  gantt.ext.zoom.init(zoomConfig); //配置初始化扩展
  gantt.ext.zoom.setLevel("month"); //切换到指定的缩放级别
};

// 左边栏echart图表
const initDeviceChart = () => {
  const deviceChart = echarts.init(deviceChartRef.value as HTMLElement);
  const option = {
    color: ["#b8dbd9", "orange", "orangered", "#586f7c"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // Use axis to trigger tooltip
        type: "shadow", //w'shadow' as default; can also be 'line' or 'shadow'
      },
    },
    legend: {
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        name: "正常",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: state.normal,
      },
      {
        name: "告警",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: state.warn,
      },
      {
        name: "故障",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: state.fault,
      },
      {
        name: "总量",
        type: "bar",
        stack: "total",
        label: {
          show: true,
          color: "#fff",
        },
        emphasis: {
          focus: "series",
        },
        data: state.total,
      },
    ],
  };
  deviceChart.setOption(option);
  state.charts.push(deviceChart);
};
const initDistrictChart = (_rawData: any) => {
  const districtChart = echarts.init(districtChartRef.value as HTMLElement);
  const districts: string[] = [
    "溧阳市",
    "天宁区",
    "新北区",
    "金坛区",
    "武进区",
    "钟楼区",
  ];
  const datasetWithFilters: DatasetComponentOption[] = [];
  const seriesList: LineSeriesOption[] = [];
  echarts.util.each(districts, function (district) {
    var datasetId = "dataset_" + district;
    datasetWithFilters.push({
      id: datasetId,
      fromDatasetId: "dataset_raw",
      transform: {
        type: "filter",
        config: {
          and: [
            { dimension: "Year", gte: 1950 },
            { dimension: "district", "=": district },
          ],
        },
      },
    });
    seriesList.push({
      type: "line",
      datasetId: datasetId,
      showSymbol: false,
      name: district,
      endLabel: {
        show: true,
        formatter: function (params: any) {
          return params.value[3] + ": " + params.value[0];
        },
      },
      labelLayout: {
        moveOverlap: "shiftY",
      },
      emphasis: {
        focus: "series",
      },
      encode: {
        x: "Year",
        label: ["device"],
        itemName: "Year",
      },
    });
    const option = {
      animationDuration: 10000,
      dataset: [
        {
          id: "dataset_raw",
          source: _rawData,
        },
        ...datasetWithFilters,
      ],
      title: {
        text: "常州行政区域接入设备数量",
        textStyle: {
          color: "#fff",
          fontWeight: "normal",
        },
      },
      tooltip: {
        order: "valueDesc",
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        nameLocation: "middle",
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
      },
      yAxis: {
        name: "device",
        show: false,
      },
      grid: {
        right: 140,
      },
      series: seriesList,
    };
    districtChart.setOption(option);
    state2.charts.push(districtChart);
  });
};

//监听窗口大下自适应的方法
const echartsResize = () => {
  nextTick(() => {
    for (const key in state.charts) {
      state.charts[key].resize();
    }
  });
};
const echartsResize2 = () => {
  nextTick(() => {
    for (const key in state2.charts) {
      state2.charts[key].resize();
    }
  });
};

/** */
const infoWindowOpen = (e: any, marker: any) => {
  console.log("marker", marker);
  dashboard.isDrawerShow = true;
  proxy.eventBus.emit("DevicesInfo", marker);
};
let mapDevices = reactive({});

type Ponit = {
  lng: number;
  lat: number;
  name: string;
};
const mapBoundary = (item: anyObj) => {};
//配合keep-alive 在页面刷新或
// 调用时机为首次挂载
// 以及每次从缓存中被重新插入时
onActivated(() => {
  // onActivated生命周期改变图表大小
  // echartsResize();
  // echartsResize2();
});
onMounted(() => {
  //从后端获取所需数据后调用初始化事件
  // getMarkers();
  console.log("坐标", markers);
  markers.length = 0;
  markers.push(...bigBoardB.markers);
  // markers = bigBoardB.markers;
  proxy.eventBus.emit("clear");

  initGantt();
});

// 待组件卸载之前调用移除监听事件
onBeforeUnmount(() => {
  console.log("onBeforeUnmount");
  proxy.eventBus.emit("clear");
});

// watch(
//   () => _.cloneDeep(bigBoardB.markers),
//   (newV, oldV) => {
//     if (newV) {
//       markers.length = 0;
//       markers.push(...newV);
//     } //双重保险保证刷新后设备数据显示
//   }
// );

//非地图模块不刷新
// watch(
//   () => _.cloneDeep(config.layout.isDark),
//   (newV, oldV) => {
//     if (newV !== oldV) {
//       router.go(0);
//     }
//   }
// );
</script>

<style lang="scss">
.default-main {
  position: relative;

  //   margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space);
  .map {
    width: 100%;
    // height: calc(100vh - 70px);
    height: calc(100vh - 100px);
  }

  .echarts-areas {
    position: absolute;
    z-index: 100;
    width: 360px;
    height: calc(100vh - 137px);
    // top: 50px;
    bottom: 0;
    background: rgba(56, 56, 56, 0.608);
    border-top: 4px solid #586f7c;
    box-shadow: inset 0px 15px 10px -15px #b8dbd9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .device-data {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;

      section {
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        // border: 2px solid #fff;
        border-radius: 8px;

        div:nth-child(1) {
          color: white;
          font-size: 12px;
        }

        div:nth-child(2) {
          //   color: rgb(56, 49, 46);
          padding: 10px 0;
          font-size: 24px;
          font-weight: bold;
        }
      }

      &-count {
        color: white;
      }

      &-normal {
        color: #b8dbd9;
      }

      &-fault {
        color: orangered;
      }
    }

    //行政区域echarts
    .districtChart {
      width: 100%;
      height: 400px;
    }

    //设备echarts
    .deviceChart {
      width: 100%;
      height: 400px;
    }
  }

  @media screen and (max-width: 425px) {
    .echarts-areas {
      display: block;
      border-top: none;
      background: #f5f5f5;
      top: 0 !important;
      width: 100% !important;
      height: 100vh !important;
      overflow: scroll;

      .device-data {
        display: flex;
        flex-direction: column;
        text-align: left;

        section {
          background-color: #e9edf2;
          border-radius: var(--el-border-radius-base);
          transition: all 0.3s ease;
          padding: 25px;
          margin-bottom: 20px;
          color: black;

          div:nth-child(1) {
            color: #92969a;
            font-size: 15px;
          }
        }

        &-count {
          div:nth-child(2) {
            &::after {
              content: "\e62d";
              font-family: "iconfont";
              padding-left: 10px;
              color: rgba(0, 47, 128, 0.759);
            }
          }
        }

        &-normal {
          div:nth-child(2) {
            &::after {
              content: "\e648";
              font-family: "iconfont";
              padding-left: 10px;
              color: rgba(0, 128, 21, 0.759);
            }
          }
        }

        &-fault {
          div:nth-child(2) {
            &::after {
              content: "\e66b";
              font-family: "iconfont";
              padding-left: 10px;
              color: rgba(208, 17, 7, 0.759);
            }
          }
        }
      }

      .districtChart {
        background: rgba(56, 56, 56, 0.608);
        border-radius: var(--el-border-radius-base);
      }

      .deviceChart {
        margin: 20px 0;
        background: rgba(56, 56, 56, 0.608);
        border-radius: var(--el-border-radius-base);
        transition: all 0.3s ease;
      }
    }
  }
}

//百度logo隐藏

.BMap_cpyCtrl {
  display: none;
}

.anchorBL {
  display: none !important;
}

.my-gantt {
  margin-top: 20px;
  height: 700px;
  width: 100%;
  .time-box {
    text-align: center;
    margin-bottom: 20px;
  }
  .gantt-container {
    width: 100%;
    height: 100%;
    .weekend {
      background: #ff9e2f;
      color: #fff;
    }
  }
}
</style>
